<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
    .split {
        line-height: 60px;
        height: 60px;
        background: #333;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: #fff;
    }

    .block {
        position: relative;
    }

    body {
        background: #555;
    }

    body .main {
        height: 550px;
        margin-right: 300px;
        margin-left: 20px;
    }

    .panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background: #555;
        color: #fff;
        font-size: 14px;
        font-weight: normal;
        padding: 10px;
    }

    ul.panel-desc {
        padding-left: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #777;
    }

    ul.panel-desc li {
        margin-bottom: 5px;
    }

    h3 {
        font-size: 14px;
    }

    #main2 {
        height: 450px;
    }

    #main2-st {
        position: relative;
        height: 200px;
        margin-right: 220px;
        margin-left: 20px;
    }

    strong {
        background: yellow;
        padding: 0 2px;
        border-radius: 2px;
        color: #000;
    }

    #main1-st {
        position: absolute;
        top: 0;
        right: 300px;
        height: 550px;
        width: 400px;
        z-index: 999;
    }

    .sm-settings {
        border-bottom: 1px solid #777;
        padding-bottom: 15px;
    }

    .sm-settings input {
        max-width: 50px;
    }
</style>

<div class="split">Scatter</div>
<div class="block">
    <div id="main2" class="main"></div>
    <div id="main2-st"></div>
    <div class="panel">
        <ul class="panel-desc">
            <li>bar and pie are individual ec instances.</li>
            <li><strong>CHECK</strong>: brush an area and drag dataZoom.</li>
        </ul>
        <div id="panel2"></div>
    </div>
</div>


<div class="split">Scatter in Map</div>
<div class="block">
    <div id="main1" class="main"></div>
    <div id="main1-st"></div>
    <div class="panel">
        <ul class="panel-desc">
            <li>bar and scatter are in the same ec instances and use setOption in brushSelected event.</li>
        </ul>
        <div class="sm-settings">
            <div>
                seperatedEChartsInstance:
                <input onclick="smChange.seperatedEChartsInstance(true)" type="radio" name="seperatedEChartsInstance"/>Y
                <input onclick="smChange.seperatedEChartsInstance(false)" type="radio" name="seperatedEChartsInstance"
                       checked="checked"/>N
            </div>
            <div>
                DIFF with previous selected:
                <input onclick="smChange.diff(true)" type="radio" name="diff"/>Y
                <input onclick="smChange.diff(false)" type="radio" name="diff" checked="checked"/>N
            </div>
            <div>
                animation:
                <input onclick="smChange.animation(true)" type="radio" name="animation" checked="checked"/>Y
                <input onclick="smChange.animation(false)" type="radio" name="animation"/>N
            </div>
            <div>
                animationDurationUpdate:
                <input value="1000" onblur="smChange.animationDurationUpdate(this)" type="text"/>
            </div>
            <div>
                throttleDelay:
                <input value="300" onblur="smChange.throttleDelay(this)" type="text"/>
            </div>
            <div>
                throttleType:
                <input onclick="smChange.throttleType('debounce')" type="radio" name="throttleType" checked="checked"/>debounce
                <input onclick="smChange.throttleType('fixRate')" type="radio" name="throttleType"/>fixRate
            </div>
        </div>
        <div id="panel1"></div>
    </div>
</div>


<div class="split">Stacked Bar (rect-polygon intersect)</div>
<div class="block">
    <div id="main4" class="main"></div>
    <div class="panel">
        <ul class="panel-desc">
            <li><strong>CHECK</strong>: rect-polygon intersect.</li>
        </ul>
        <div id="panel4"></div>
    </div>
</div>


<!-- =================== 1 ===================== -->


<script type="text/javascript">
    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/chart/line',
        // 'echarts/chart/pie',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/visualMapContinuous',
        // 'echarts/component/dataZoom',
        // 'echarts/component/toolbox',
        // 'echarts/component/brush'
    ], function (echarts) {

        var main = document.getElementById('main2');
        var panel = document.getElementById('panel2');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);
        var chart2St = echarts.init(document.getElementById('main2-st'));

        var dataList = [[], [], []];

        var MAX_DIM2 = 300;
        var MAX_DIM3 = 20000;

        var itemStyle = {
            normal: {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        };

        for (var i = 0; i < 60; i++) {
            dataList[0].push(genDataItem());
            dataList[1].push(genDataItem());
            dataList[2].push(genDataItem());
        }

        function genDataItem() {
            return [
                Math.random() * 5,
                Math.random() * 4,
                Math.random() * MAX_DIM2,
                Math.random() * MAX_DIM3
            ];
        }

        var option = {
            color: ['#555', '#555'],
            backgroundColor: '#fff',
            toolbox: {
                feature: {
                    dataZoom: {}
                }
            },
            brush: {},
            legend: {
                top: 20,
                data: ['scatter0', 'scatter1', 'scatter2']
            },
            grid: [
                {
                    top: 100,
                    bottom: 60,
                    left: 150
                }
            ],
            xAxis: [
                {
                    type: 'value',
                    splitLine: {show: false}
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {show: false}
                }
            ],
            animationDurationUpdate: 10,
            visualMap: [
                {
                    show: true,
                    top: 'center',
                    left: 30,
                    itemHeight: 400,
                    min: 0,
                    max: MAX_DIM2,
                    range: [20, MAX_DIM2 - 30],
                    calculable: true,
                    dimension: 2,
                    inRange: {
                        color: ['blue', 'orange', 'yellow']
                    },
                    outOfRange: {
                        color: ['blue', 'orange', 'yellow'],
                        opacity: 0.1
                    }
                },
                {
                    show: false,
                    min: 0,
                    max: MAX_DIM3,
                    dimension: 3,
                    inRange: {
                        symbolSize: [3, 40]
                    },
                    outOfRange: {
                        symbolSize: [3, 40]
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'slider',
                    start: 40
                },
                {
                    type: 'inside',
                    start: 40
                }
            ],
            series: [
                {
                    name: 'scatter0',
                    type: 'scatter',
                    symbol: 'circle',
                    itemStyle: itemStyle,
                    data: dataList[0]
                },
                {
                    name: 'scatter1',
                    type: 'scatter',
                    symbol: 'diamond',
                    itemStyle: itemStyle,
                    data: dataList[1]
                },
                {
                    name: 'scatter2',
                    type: 'scatter',
                    symbol: 'rect',
                    itemStyle: itemStyle,
                    data: dataList[2]
                }
            ]
        };

        chart.on('brushSelected', renderBrushed);
        window.onresize = function () {
            chart.resize();
            chart2St.resize();
        };

        var dim2SumTrack = [];
        var dim3SumTrack = [];
        var trackNums = [];
        var trackNum = 0;
        var trackMax = 30;

        chart.setOption(option);
        chart.setOption({});

        chart.dispatchAction({
            type: 'brush', areas: [
                {brushType: 'rect', range: [[200, 300], [100, 350]]}
            ]
        });

        function renderBrushed(params) {
            var brushed = [];
            var dim2Sum = 0;
            var dim3Sum = 0;
            var countBySeries = [];
            var brushComponent = params.batch[0];

            for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                var rawIndices = brushComponent.selected[sIdx].dataIndex;
                brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                for (var i = 0; i < rawIndices.length; i++) {
                    dim2Sum += dataList[sIdx][rawIndices[i]][2];
                    dim3Sum += dataList[sIdx][rawIndices[i]][3];
                }
                countBySeries[sIdx] = {
                    name: 'series-' + sIdx,
                    value: rawIndices.length
                };
            }

            dim2SumTrack.push(dim2Sum);
            dim3SumTrack.push(dim3Sum);
            trackNums.push(trackNum++);
            if (trackNums.length > trackMax) {
                dim2SumTrack.shift();
                dim3SumTrack.shift();
                trackNums.shift();
            }

            panel.innerHTML = [
                '<h3>STATISTICS:</h3>',
                'DIM2 SUM: ' + dim2Sum.toFixed(4) + '<br>',
                'DIM3 SUM: ' + dim3Sum.toFixed(4) + '<br>',
                '<br>',
                '<br>',
                '<h3>BRUSHED RAW INDICES:</h3>',
                brushed.join('<br><br>'),
            ].join(' ');

            chart2St.setOption({
                backgroundColor: '#fff',
                title: [
                    {
                        // text: 'Selected\nCount',
                        text: 'SSSSS',
                        // text: 'SSSSS\nSSSSS\nSSSSS\nSSSSS',
                        textStyle: {
                            fontSize: 14
                        },
                        textAlign: 'center',
                        // textVeritalAlign:
                        // textBaseline: 'bottom',
                        left: '75%',
                        top: '50%'
                    }
                ],
                grid: {
                    left: 20,
                    top: 50,
                    bottom: 20,
                    containLabel: true,
                    width: '50%'
                },
                xAxis: {
                    type: 'category',
                    scale: true,
                    boundaryGap: false,
                    splitLine: {show: false},
                    data: trackNums
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'dim2 sum',
                        splitNumber: 5,
                        axisLine: {onZero: false, lineStyle: {color: '#c23531'}},
                        axisTick: {show: false}
                    },
                    {
                        type: 'value',
                        name: 'dim3 sum',
                        splitNumber: 5,
                        axisLine: {onZero: false, lineStyle: {color: '#61a0a8'}},
                        axisTick: {show: false}
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        center: ['75%', '50%'],
                        radius: [50, 70],
                        data: countBySeries
                    },
                    {
                        type: 'line',
                        symbol: 'none',
                        lineStyle: {normal: {color: '#c23531'}},
                        data: dim2SumTrack
                    },
                    {
                        type: 'line',
                        symbol: 'none',
                        lineStyle: {normal: {color: '#61a0a8'}},
                        yAxisIndex: 1,
                        data: dim3SumTrack
                    }
                ]
            });
        }
    })
</script>


<!-- =================== 2 ===================== -->


<script>

    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/chart/scatter',
        // 'echarts/chart/effectScatter',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/geo',
        // 'echarts/component/brush'
    ], function (echarts) {

        var data = [{name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {
            name: '舟山',
            value: 12
        }, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {
            name: '青岛',
            value: 18
        }, {name: '乳山', value: 18}, {name: '金昌', value: 19}, {name: '泉州', value: 21}, {
            name: '莱西',
            value: 21
        }, {name: '日照', value: 21}, {name: '胶南', value: 22}, {name: '南通', value: 23}, {
            name: '拉萨',
            value: 24
        }, {name: '云浮', value: 24}, {name: '梅州', value: 25}, {name: '文登', value: 25}, {
            name: '上海',
            value: 25
        }, {name: '攀枝花', value: 25}, {name: '威海', value: 25}, {name: '承德', value: 25}, {
            name: '厦门',
            value: 26
        }, {name: '汕尾', value: 26}, {name: '潮州', value: 26}, {name: '丹东', value: 27}, {
            name: '太仓',
            value: 27
        }, {name: '曲靖', value: 27}, {name: '烟台', value: 28}, {name: '福州', value: 29}, {
            name: '瓦房店',
            value: 30
        }, {name: '即墨', value: 30}, {name: '抚顺', value: 31}, {name: '玉溪', value: 31}, {
            name: '张家口',
            value: 31
        }, {name: '阳泉', value: 31}, {name: '莱州', value: 32}, {name: '湖州', value: 32}, {
            name: '汕头',
            value: 32
        }, {name: '昆山', value: 33}, {name: '宁波', value: 33}, {name: '湛江', value: 33}, {
            name: '揭阳',
            value: 34
        }, {name: '荣成', value: 34}, {name: '连云港', value: 35}, {name: '葫芦岛', value: 35}, {
            name: '常熟',
            value: 36
        }, {name: '东莞', value: 36}, {name: '河源', value: 36}, {name: '淮安', value: 36}, {
            name: '泰州',
            value: 36
        }, {name: '南宁', value: 37}, {name: '营口', value: 37}, {name: '惠州', value: 37}, {
            name: '江阴',
            value: 37
        }, {name: '蓬莱', value: 37}, {name: '韶关', value: 38}, {name: '嘉峪关', value: 38}, {
            name: '广州',
            value: 38
        }, {name: '延安', value: 38}, {name: '太原', value: 39}, {name: '清远', value: 39}, {
            name: '中山',
            value: 39
        }, {name: '昆明', value: 39}, {name: '寿光', value: 40}, {name: '盘锦', value: 40}, {
            name: '长治',
            value: 41
        }, {name: '深圳', value: 41}, {name: '珠海', value: 42}, {name: '宿迁', value: 43}, {
            name: '咸阳',
            value: 43
        }, {name: '铜川', value: 44}, {name: '平度', value: 44}, {name: '佛山', value: 44}, {
            name: '海口',
            value: 44
        }, {name: '江门', value: 45}, {name: '章丘', value: 45}, {name: '肇庆', value: 46}, {
            name: '大连',
            value: 47
        }, {name: '临汾', value: 47}, {name: '吴江', value: 47}, {name: '石嘴山', value: 49}, {
            name: '沈阳',
            value: 50
        }, {name: '苏州', value: 50}, {name: '茂名', value: 50}, {name: '嘉兴', value: 51}, {
            name: '长春',
            value: 51
        }, {name: '胶州', value: 52}, {name: '银川', value: 52}, {name: '张家港', value: 52}, {
            name: '三门峡',
            value: 53
        }, {name: '锦州', value: 54}, {name: '南昌', value: 54}, {name: '柳州', value: 54}, {
            name: '三亚',
            value: 54
        }, {name: '自贡', value: 56}, {name: '吉林', value: 56}, {name: '阳江', value: 57}, {
            name: '泸州',
            value: 57
        }, {name: '西宁', value: 57}, {name: '宜宾', value: 58}, {name: '呼和浩特', value: 58}, {
            name: '成都',
            value: 58
        }, {name: '大同', value: 58}, {name: '镇江', value: 59}, {name: '桂林', value: 59}, {
            name: '张家界',
            value: 59
        }, {name: '宜兴', value: 59}, {name: '北海', value: 60}, {name: '西安', value: 61}, {
            name: '金坛',
            value: 62
        }, {name: '东营', value: 62}, {name: '牡丹江', value: 63}, {name: '遵义', value: 63}, {
            name: '绍兴',
            value: 63
        }, {name: '扬州', value: 64}, {name: '常州', value: 64}, {name: '潍坊', value: 65}, {
            name: '重庆',
            value: 66
        }, {name: '台州', value: 67}, {name: '南京', value: 67}, {name: '滨州', value: 70}, {
            name: '贵阳',
            value: 71
        }, {name: '无锡', value: 71}, {name: '本溪', value: 71}, {name: '克拉玛依', value: 72}, {
            name: '渭南',
            value: 72
        }, {name: '马鞍山', value: 72}, {name: '宝鸡', value: 72}, {name: '焦作', value: 75}, {
            name: '句容',
            value: 75
        }, {name: '北京', value: 79}, {name: '徐州', value: 79}, {name: '衡水', value: 80}, {
            name: '包头',
            value: 80
        }, {name: '绵阳', value: 80}, {name: '乌鲁木齐', value: 84}, {name: '枣庄', value: 84}, {
            name: '杭州',
            value: 84
        }, {name: '淄博', value: 85}, {name: '鞍山', value: 86}, {name: '溧阳', value: 86}, {
            name: '库尔勒',
            value: 86
        }, {name: '安阳', value: 90}, {name: '开封', value: 90}, {name: '济南', value: 92}, {
            name: '德阳',
            value: 93
        }, {name: '温州', value: 95}, {name: '九江', value: 96}, {name: '邯郸', value: 98}, {
            name: '临安',
            value: 99
        }, {name: '兰州', value: 99}, {name: '沧州', value: 100}, {name: '临沂', value: 103}, {
            name: '南充',
            value: 104
        }, {name: '天津', value: 105}, {name: '富阳', value: 106}, {name: '泰安', value: 112}, {
            name: '诸暨',
            value: 112
        }, {name: '郑州', value: 113}, {name: '哈尔滨', value: 114}, {name: '聊城', value: 116}, {
            name: '芜湖',
            value: 117
        }, {name: '唐山', value: 119}, {name: '平顶山', value: 119}, {name: '邢台', value: 119}, {
            name: '德州',
            value: 120
        }, {name: '济宁', value: 120}, {name: '荆州', value: 127}, {name: '宜昌', value: 130}, {
            name: '义乌',
            value: 132
        }, {name: '丽水', value: 133}, {name: '洛阳', value: 134}, {name: '秦皇岛', value: 136}, {
            name: '株洲',
            value: 143
        }, {name: '石家庄', value: 147}, {name: '莱芜', value: 148}, {name: '常德', value: 152}, {
            name: '保定',
            value: 153
        }, {name: '湘潭', value: 154}, {name: '金华', value: 157}, {name: '岳阳', value: 169}, {
            name: '长沙',
            value: 175
        }, {name: '衢州', value: 177}, {name: '廊坊', value: 193}, {name: '菏泽', value: 194}, {
            name: '合肥',
            value: 229
        }, {name: '武汉', value: 273}, {name: '大庆', value: 279}];

        require(['map/js/china'], function () {
            var geoCoordMap = {
                '海门': [121.15, 31.89],
                '鄂尔多斯': [109.781327, 39.608266],
                '招远': [120.38, 37.35],
                '舟山': [122.207216, 29.985295],
                '齐齐哈尔': [123.97, 47.33],
                '盐城': [120.13, 33.38],
                '赤峰': [118.87, 42.28],
                '青岛': [120.33, 36.07],
                '乳山': [121.52, 36.89],
                '金昌': [102.188043, 38.520089],
                '泉州': [118.58, 24.93],
                '莱西': [120.53, 36.86],
                '日照': [119.46, 35.42],
                '胶南': [119.97, 35.88],
                '南通': [121.05, 32.08],
                '拉萨': [91.11, 29.97],
                '云浮': [112.02, 22.93],
                '梅州': [116.1, 24.55],
                '文登': [122.05, 37.2],
                '上海': [121.48, 31.22],
                '攀枝花': [101.718637, 26.582347],
                '威海': [122.1, 37.5],
                '承德': [117.93, 40.97],
                '厦门': [118.1, 24.46],
                '汕尾': [115.375279, 22.786211],
                '潮州': [116.63, 23.68],
                '丹东': [124.37, 40.13],
                '太仓': [121.1, 31.45],
                '曲靖': [103.79, 25.51],
                '烟台': [121.39, 37.52],
                '福州': [119.3, 26.08],
                '瓦房店': [121.979603, 39.627114],
                '即墨': [120.45, 36.38],
                '抚顺': [123.97, 41.97],
                '玉溪': [102.52, 24.35],
                '张家口': [114.87, 40.82],
                '阳泉': [113.57, 37.85],
                '莱州': [119.942327, 37.177017],
                '湖州': [120.1, 30.86],
                '汕头': [116.69, 23.39],
                '昆山': [120.95, 31.39],
                '宁波': [121.56, 29.86],
                '湛江': [110.359377, 21.270708],
                '揭阳': [116.35, 23.55],
                '荣成': [122.41, 37.16],
                '连云港': [119.16, 34.59],
                '葫芦岛': [120.836932, 40.711052],
                '常熟': [120.74, 31.64],
                '东莞': [113.75, 23.04],
                '河源': [114.68, 23.73],
                '淮安': [119.15, 33.5],
                '泰州': [119.9, 32.49],
                '南宁': [108.33, 22.84],
                '营口': [122.18, 40.65],
                '惠州': [114.4, 23.09],
                '江阴': [120.26, 31.91],
                '蓬莱': [120.75, 37.8],
                '韶关': [113.62, 24.84],
                '嘉峪关': [98.289152, 39.77313],
                '广州': [113.23, 23.16],
                '延安': [109.47, 36.6],
                '太原': [112.53, 37.87],
                '清远': [113.01, 23.7],
                '中山': [113.38, 22.52],
                '昆明': [102.73, 25.04],
                '寿光': [118.73, 36.86],
                '盘锦': [122.070714, 41.119997],
                '长治': [113.08, 36.18],
                '深圳': [114.07, 22.62],
                '珠海': [113.52, 22.3],
                '宿迁': [118.3, 33.96],
                '咸阳': [108.72, 34.36],
                '铜川': [109.11, 35.09],
                '平度': [119.97, 36.77],
                '佛山': [113.11, 23.05],
                '海口': [110.35, 20.02],
                '江门': [113.06, 22.61],
                '章丘': [117.53, 36.72],
                '肇庆': [112.44, 23.05],
                '大连': [121.62, 38.92],
                '临汾': [111.5, 36.08],
                '吴江': [120.63, 31.16],
                '石嘴山': [106.39, 39.04],
                '沈阳': [123.38, 41.8],
                '苏州': [120.62, 31.32],
                '茂名': [110.88, 21.68],
                '嘉兴': [120.76, 30.77],
                '长春': [125.35, 43.88],
                '胶州': [120.03336, 36.264622],
                '银川': [106.27, 38.47],
                '张家港': [120.555821, 31.875428],
                '三门峡': [111.19, 34.76],
                '锦州': [121.15, 41.13],
                '南昌': [115.89, 28.68],
                '柳州': [109.4, 24.33],
                '三亚': [109.511909, 18.252847],
                '自贡': [104.778442, 29.33903],
                '吉林': [126.57, 43.87],
                '阳江': [111.95, 21.85],
                '泸州': [105.39, 28.91],
                '西宁': [101.74, 36.56],
                '宜宾': [104.56, 29.77],
                '呼和浩特': [111.65, 40.82],
                '成都': [104.06, 30.67],
                '大同': [113.3, 40.12],
                '镇江': [119.44, 32.2],
                '桂林': [110.28, 25.29],
                '张家界': [110.479191, 29.117096],
                '宜兴': [119.82, 31.36],
                '北海': [109.12, 21.49],
                '西安': [108.95, 34.27],
                '金坛': [119.56, 31.74],
                '东营': [118.49, 37.46],
                '牡丹江': [129.58, 44.6],
                '遵义': [106.9, 27.7],
                '绍兴': [120.58, 30.01],
                '扬州': [119.42, 32.39],
                '常州': [119.95, 31.79],
                '潍坊': [119.1, 36.62],
                '重庆': [106.54, 29.59],
                '台州': [121.420757, 28.656386],
                '南京': [118.78, 32.04],
                '滨州': [118.03, 37.36],
                '贵阳': [106.71, 26.57],
                '无锡': [120.29, 31.59],
                '本溪': [123.73, 41.3],
                '克拉玛依': [84.77, 45.59],
                '渭南': [109.5, 34.52],
                '马鞍山': [118.48, 31.56],
                '宝鸡': [107.15, 34.38],
                '焦作': [113.21, 35.24],
                '句容': [119.16, 31.95],
                '北京': [116.46, 39.92],
                '徐州': [117.2, 34.26],
                '衡水': [115.72, 37.72],
                '包头': [110, 40.58],
                '绵阳': [104.73, 31.48],
                '乌鲁木齐': [87.68, 43.77],
                '枣庄': [117.57, 34.86],
                '杭州': [120.19, 30.26],
                '淄博': [118.05, 36.78],
                '鞍山': [122.85, 41.12],
                '溧阳': [119.48, 31.43],
                '库尔勒': [86.06, 41.68],
                '安阳': [114.35, 36.1],
                '开封': [114.35, 34.79],
                '济南': [117, 36.65],
                '德阳': [104.37, 31.13],
                '温州': [120.65, 28.01],
                '九江': [115.97, 29.71],
                '邯郸': [114.47, 36.6],
                '临安': [119.72, 30.23],
                '兰州': [103.73, 36.03],
                '沧州': [116.83, 38.33],
                '临沂': [118.35, 35.05],
                '南充': [106.110698, 30.837793],
                '天津': [117.2, 39.13],
                '富阳': [119.95, 30.07],
                '泰安': [117.13, 36.18],
                '诸暨': [120.23, 29.71],
                '郑州': [113.65, 34.76],
                '哈尔滨': [126.63, 45.75],
                '聊城': [115.97, 36.45],
                '芜湖': [118.38, 31.33],
                '唐山': [118.02, 39.63],
                '平顶山': [113.29, 33.75],
                '邢台': [114.48, 37.05],
                '德州': [116.29, 37.45],
                '济宁': [116.59, 35.38],
                '荆州': [112.239741, 30.335165],
                '宜昌': [111.3, 30.7],
                '义乌': [120.06, 29.32],
                '丽水': [119.92, 28.45],
                '洛阳': [112.44, 34.7],
                '秦皇岛': [119.57, 39.95],
                '株洲': [113.16, 27.83],
                '石家庄': [114.48, 38.03],
                '莱芜': [117.67, 36.19],
                '常德': [111.69, 29.05],
                '保定': [115.48, 38.85],
                '湘潭': [112.91, 27.87],
                '金华': [119.64, 29.12],
                '岳阳': [113.09, 29.37],
                '长沙': [113, 28.21],
                '衢州': [118.88, 28.97],
                '廊坊': [116.7, 39.53],
                '菏泽': [115.480656, 35.23375],
                '合肥': [117.27, 31.86],
                '武汉': [114.31, 30.52],
                '大庆': [125.03, 46.58]
            };

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            var convertedData = [
                convertData(data),
                convertData(data.slice().sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6))
            ];

            var chart = echarts.init(document.getElementById('main1'));
            var elSt = document.getElementById('main1-st');
            var chartSt = echarts.init(document.getElementById('main1-st'));
            elSt.style.visibility = 'hidden';
            panel = document.getElementById('panel1');


            var smSettings = {
                seperatedEChartsInstance: false,
                diff: false,
                animation: true,
                animationDurationUpdate: 1000,
                throttleDelay: 300,
                throttleType: 'debounce'
            };

            window.smChange = {
                seperatedEChartsInstance: function (val) {
                    smSettings.seperatedEChartsInstance = val;
                    restart();
                },
                diff: function (val) {
                    smSettings.diff = val;
                    restart();
                },
                animation: function (val) {
                    smSettings.animation = val;
                    restart();
                },
                animationDurationUpdate: function (el) {
                    smSettings.animationDurationUpdate = +el.value;
                    restart();
                },
                throttleDelay: function (el) {
                    smSettings.throttleDelay = +el.value;
                    restart();
                },
                throttleType: function (val) {
                    smSettings.throttleType = val;
                    restart();
                }
            };


            restart();


            function restart() {
                chart.off();
                chartSt.off();

                var option = {
                    backgroundColor: '#404a59',
                    animation: smSettings.animation,
                    animationDurationUpdate: smSettings.animationDurationUpdate,
                    title: {
                        text: '全国主要城市空气质量',
                        subtext: 'data from PM25.in',
                        sublink: 'http://www.pm25.in',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    toolbox: {
                        iconStyle: {
                            normal: {
                                borderColor: '#fff'
                            },
                            emphasis: {
                                borderColor: '#b1e4ff'
                            }
                        }
                    },
                    brush: {
                        outOfBrush: {
                            color: '#abc'
                        },
                        brushStyle: {
                            borderWidth: 2,
                            color: 'rgba(0,0,0,0.2)',
                            borderColor: 'rgba(0,0,0,0.5)',
                        },
                        seriesIndex: [0, 1],
                        throttleType: smSettings.throttleType,
                        throttleDelay: smSettings.throttleDelay,
                        geoIndex: 0
                    },
                    geo: {
                        map: 'china',
                        left: '10',
                        right: '35%',
                        center: [117.98561551896913, 31.205000490896193],
                        zoom: 4.177248169415658,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [
                        {
                            name: 'pm2.5',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertedData[0],
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: convertedData[1],
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            showEffectOn: 'emphasis',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#f4e925',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            zlevel: 1
                        }
                    ]
                };

                var optionSt = {
                    animation: smSettings.animation,
                    animationDurationUpdate: smSettings.animationDurationUpdate,
                    tooltip: {
                        trigger: 'item'
                    },
                    grid: {
                        right: 20,
                        top: 50,
                        left: 80,
                        bottom: 20,
                        width: null
                    },
                    xAxis: {
                        type: 'value',
                        scale: true,
                        boundaryGap: false,
                        splitLine: {show: false},
                        axisLine: {show: false, lineStyle: {color: '#ddd'}},
                        axisTick: {show: false},
                        axisLabel: {textStyle: {color: '#ddd'}},
                    },
                    yAxis: {
                        type: 'category',
                        name: 'PM 2.5',
                        axisLine: {show: false, lineStyle: {color: '#ddd'}},
                        axisTick: {show: false, lineStyle: {color: '#ddd'}},
                        axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
                        data: []
                    },
                    series: [
                        {
                            id: 'bar',
                            zlevel: 2,
                            type: 'bar',
                            symbol: 'none',
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            },
                            data: []
                        }
                    ]
                };

                if (!smSettings.seperatedEChartsInstance) {
                    for (var key in optionSt) {
                        if (key !== 'series') {
                            option[key] = optionSt[key];
                        }
                    }
                    option.series.push(optionSt.series[0]);
                    option.grid.left = null;
                    option.grid.width = '30%';
                }

                var oldCategoryData = [];
                var oldBarData = [];

                chart.on('brushSelected', renderBrushed);
                chart.setOption(option, true);
                chart.dispatchAction({
                    type: 'brush',
                    areas: [
                        // {
                        //     geoIndex: 0,
                        //     brushType: 'polygon',
                        //     range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401,474],[409,483],[419,493],[432,502],[453,502],[487,484],[521,436],[536,364],[539,322],[539,309],[537,305],[537,304],[536,295],[517,273],[511,264],[511,264]]
                        // }
                        {
                            geoIndex: 0,
                            brushType: 'polygon',
                            // coordRange: [[121.15,31.89], [120.95,31.39], [112.91,27.87], [118.78,32.04]]
                            coordRange: [[121.15, 31.89], [121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33]]
                            // geoRange: [[117.27,31.86], [114.31,30.52], [126.57,43.87]]
                        }
                    ]
                });


                if (smSettings.seperatedEChartsInstance) {
                    elSt.style.visibility = 'visible';
                    chartSt.setOption(optionSt, true);
                } else {
                    elSt.style.visibility = 'hidden';
                }

                function renderBrushed(params) {
                    var brushed = [];
                    var top = 0;
                    var topWhere;
                    var sum = 0;
                    var count = 0;
                    var brushComponent = params.batch[0];
                    var selectedItems = [];

                    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                        var rawIndices = brushComponent.selected[sIdx].dataIndex;
                        var placesBySeries = [];
                        for (var i = 0; i < rawIndices.length; i++) {
                            var rawIndex = rawIndices[i];
                            var item = convertedData[sIdx][rawIndex];
                            var value = item.value[2];
                            sum += value;
                            count++;
                            if (value > top) {
                                top = value;
                                topWhere = item.name;
                            }
                            if (sIdx === 0) {
                                selectedItems.push(item);
                            }
                            placesBySeries.push(item.name);
                        }
                        brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
                    }


                    panel.innerHTML = [
                        '<h3>STATISTICS:</h3>',
                        'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
                        'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
                        '<br>',
                        '<br>',
                        '<h3>BRUSHED:</h3>',
                        brushed.join('<br><br>'),
                    ].join(' ');

                    selectedItems.sort(function (a, b) {
                        return a.value[2] - b.value[2];
                    });

                    var categoryData = [];
                    var barData = [];
                    var max = 30;

                    for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
                        categoryData.push(selectedItems[i].name);
                        barData.push(selectedItems[i].value[2]);
                    }

                    var isDiff = checkDiff(categoryData, oldCategoryData)
                        || checkDiff(barData, oldBarData);
                    oldCategoryData = categoryData;
                    oldBarData = barData;

                    if (!smSettings.diff || isDiff) {
                        var targetName = smSettings.seperatedEChartsInstance ? 'chart2' : 'mainChart';
                        smSettings.diff
                            ? console.log('diff checked and setOption to ' + targetName)
                            : console.log('do not check diff and setOption' + targetName);

                        (smSettings.seperatedEChartsInstance ? chartSt : chart).setOption({
                            yAxis: {data: categoryData},
                            series: {id: 'bar', data: barData}
                        });
                    }
                }

                function checkDiff(list, oldList) {
                    if (list.length !== oldList.length) {
                        return true;
                    } else {
                        for (var i = 0; i < list.length; i++) {
                            if (list[i] !== oldList[i]) {
                                return true;
                            }
                        }
                    }
                }
            }
        });
    });

</script>


<!-- =================== 3 ===================== -->


<script type="text/javascript">

    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/toolbox',
        // 'echarts/component/brush',
        // 'zrender/vml/vml'
    ], function (echarts) {

        var main = document.getElementById('main4');
        var panel = document.getElementById('panel4');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];

        for (var i = 0; i < 10; i++) {
            xAxisData.push('Class' + i);

            if (i === 1) {
                // Test null data.
                data1.push(null);
            } else {
                data1.push((Math.random() * 2).toFixed(2));
            }

            data2.push(-Math.random().toFixed(2));
            data3.push((Math.random() * 5).toFixed(2));
            data4.push((Math.random() + 0.3).toFixed(2));
        }

        var itemStyle = {
            normal: {
                label: {
                    show: true,
                    position: 'outside'
                }
            },
            emphasis: {
                label: {
                    position: 'outside'
                },
                barBorderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        };

        var option = {
            backgroundColor: '#eee',
            legend: {
                data: ['bar', 'bar2', 'bar3', 'bar4'],
                align: 'left',
                left: 10
            },
            brush: {
                xAxisIndex: 0
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataView: {}
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                name: 'X Axis',
                silent: false,
                axisLine: {onZero: true},
                splitLine: {show: false},
                splitArea: {show: false}
            },
            yAxis: {
                inverse: true,
                splitArea: {show: false}
            },
            grid: {
                left: 100
            },
            visualMap: {
                type: 'continuous',
                dimension: 1,
                text: ['High', 'Low'],
                inverse: true,
                itemHeight: 200,
                calculable: true,
                min: -2,
                max: 6,
                top: 60,
                left: 10
            },
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: data1
                },
                {
                    name: 'bar2',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: data2
                },
                {
                    name: 'bar3',
                    type: 'bar',
                    stack: 'two',
                    itemStyle: itemStyle,
                    data: data3
                },
                {
                    name: 'bar4',
                    type: 'bar',
                    stack: 'two',
                    itemStyle: itemStyle,
                    data: data4
                }
            ]
        };

        chart.on('brushSelected', renderBrushed);
        window.onresize = function () {
            chart.resize();
        };

        chart.setOption(option);

        function renderBrushed(params) {
            var brushed = [];
            var brushComponent = params.batch[0];

            for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                var rawIndices = brushComponent.selected[sIdx].dataIndex;
                brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
            }

            panel.innerHTML = [
                '<h3>BRUSHED RAW INDICES:</h3>',
                brushed.join('<br><br>'),
            ].join(' ');
        }
    });
</script>


</body>
</html>
